<script setup>
import { ref, watch } from 'vue';
import zh from 'element-plus/dist/locale/zh-cn.mjs';
import en from 'element-plus/dist/locale/en.mjs';
import es from 'element-plus/dist/locale/es.mjs';

const props = defineProps(['locale'])

const value = ref()
const locale = ref(props.locale);
watch(() => props.locale, newVal => {
  switch (newVal) {
    case 'zh':
      locale.value = zh;
      break;
    case 'en':
      locale.value = en;
      break;
    case 'es':
      locale.value = es;
      break;
  }
}, { immediate: true })
</script>

<template>
  <el-config-provider :locale="locale">
    <div class="elementui">
      <h3>Element UI</h3>
      <br>
      <el-calendar v-model="value" />
    </div>
  </el-config-provider>
</template>

<style scoped>
.elementui{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>